<template class="llooii">
  <div class="ecd">
    <my-header></my-header>

    <div class="img-haha">
      <div class="box-haha">
        <div class="box-hehe" @click="sscc">X</div>
        <img
          src="https://img.bosszhipin.com/beijin/cms/c1ff68efb24f90264debc6cb7fa7ba66605030d0b7fa650d6d9fe46c460f68b734b87160fa194e8bbb449ff8d63b4102.png?x-oss-process=image%2Fresize%2Cw_750"
        />
        <img
          src="https://img.bosszhipin.com/beijin/cms/ad86cde9daaf218ddf96915a7ed265ce605030d0b7fa650d6d9fe46c460f68b7541b89aae5fe4aa1a5b5b19d3f8cff77.png?x-oss-process=image%2Fresize%2Cw_750"
        />
        <img
          src="https://img.bosszhipin.com/beijin/cms/8fe57dd949c6e5e3d2676fefa823f797fbcf1fe2146e01096e1e8f8db8373f699c4f5cc42c9a4d59b82eb63d38091e39.png?x-oss-process=image%2Fresize%2Cw_750"
        />
      </div>
    </div>

    <el-main class="mmnnbbvv">
      <h1 class="zybk">{{ msg }}</h1>
      <p v-html="zxcct" class="pppt"></p>
      <p class="pppa">{{ nnbui }}</p>
      <div class="inputcss">
        <input placeholder="搜索职位" /><button>搜索</button>
      </div>
      <div class="bangdan">
        <div class="bangdanoo">{{ three[0] }}</div>

        <div class="ooeeccdd">
          <div class="eeccdd" v-for="(item, idx) in four" :key="idx">
            <h3 class="xinchou"><a>۞</a> {{ item.title }}</h3>
            <div class="small">
              <div v-for="(val, i) in item.data" :key="i" class="ppxxss">
                <p class="ddffgg">{{ val.data1 }}</p>
                <p class="aassddff">{{ val.data2 }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mitan">
        <div class="bangdanooo">{{ three[1] }}</div>

        <template>
          <el-carousel indicator-position="outside">
            <el-carousel-item>
              <div class="Imgbox" v-for="(val, idx) in fourImg" :key="idx">
                <img id="imgs" :src="val.img" @click="idid" />
                <p>{{ val.alt }}</p>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="Imgbox" v-for="(val, idx) in secondImg" :key="idx">
                <img id="imgs" :src="val.img" @click="idid" />
                <p>{{ val.alt }}</p>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="Imgbox" v-for="(val, idx) in thirdImg" :key="idx">
                <img id="imgs" :src="val.img" @click="idid" />
                <p>{{ val.alt }}</p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>

      <div class="mitan">
        <div class="bangdanooo">{{ three[1] }}</div>

        <template>
          <el-carousel indicator-position="outside">
            <el-carousel-item>
              <div class="Imgbox" v-for="(val, idx) in OneMsg" :key="idx">
                <img id="imgs" :src="val.img" />
                <p>{{ val.alt }}</p>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="Imgbox" v-for="(val, idx) in TwoMsg" :key="idx">
                <img id="imgs" :src="val.img" />
                <p>{{ val.alt }}</p>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="Imgbox" v-for="(val, idx) in ThreeMsg" :key="idx">
                <img id="imgs" :src="val.img" />
                <p>{{ val.alt }}</p>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="Imgbox" v-for="(val, idx) in FourMsg" :key="idx">
                <img id="imgs" :src="val.img" />
                <p>{{ val.alt }}</p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </el-main>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myheader from "@/components/header.vue";
import myfooter from "@/components/footer.vue";
import { getEcdate } from "@/api";

export default {
  name: "InEcd",
  data() {
    return {
      msg: "职业百科",
      zxcct: "BOSS职业百科词条已收录<a>981</a>个职业",
      nnbui:
        "快速了解不同职业的晋升之路、薪资待遇，更有转行数据及热议问答，助你轻松入行。",
      four: [],
      three: [],
      fourImg: [],
      secondImg: [],
      thirdImg: [],
      OneMsg: [],
      TwoMsg: [],
      ThreeMsg: [],
      FourMsg: [],
    };
  },
  methods: {
    idid() {
      const ddss = document.querySelector(".img-haha");
      ddss.style.display = "block";
    },
    sscc() {
      const ccss = document.querySelector(".img-haha");
      ccss.style.display = "none";
    },
  },
  //
  components: {
    "my-header": myheader,
    "my-footer": myfooter,
  },
  created() {
    getEcdate().then((res) => {
      const re = res.data.data;
      this.four = re[0].data;
      re.forEach((val) => {
        this.three.push(val.title);
      });
      this.fourImg = re[1].data.slice(1, 5);
      this.secondImg = re[1].data.slice(5, 9);
      this.thirdImg = re[1].data.slice(9, 10);
      this.OneMsg = re[2].data.slice(0, 4);
      this.TwoMsg = re[2].data.slice(4, 8);
      this.ThreeMsg = re[2].data.slice(8, 12);
      this.FourMsg = re[2].data.slice(12, 16);
    });
  },
};
</script>
<style lang="less">
.img-haha {
  display: none;
  overflow: hidden;
  .box-hehe {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-bottom-left-radius: 10px;
    text-align: center;
    background-color: rgb(85, 79, 79);
    position: fixed;
    right: 0;
  }
  .box-haha {
    width: 500px;
    height: 100%;
    position: fixed;
    right: 0;
    z-index: 100;
    overflow: auto;
    img {
      width: 100%;
      height: 700px;
    }
  }
}

.mitanhh {
  width: 100%;
  background-color: #ffffff;
  margin-top: 30px;
  border-radius: 8px;
}
.mmnnbbvv {
  overflow: initial;
}
.llooii {
  width: 100%;
  height: 100%;
}

.el-carousel__indicator {
  display: none;
}

.ecd {
  display: flex;
  flex-direction: column;
  background-color: rgb(247, 248, 250);
  width: 100%;

  main {
    .zybk {
      color: black;
      font-size: 33px;
      text-align: center;
      margin-top: 38px;

      height: 100%;
    }
    .pppt {
      color: black;
      text-align: center;
      margin-top: 18px;
      font-size: 20px;
      a {
        color: rgb(0, 184, 191);
        margin: 0 10px;
      }
    }

    .pppa {
      color: rgb(88, 85, 91);
      font-size: 16px;
      text-align: center;
      margin-top: 19px;
    }
    .inputcss {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 25px;
      margin-bottom: 30px;

      input {
        width: 580px;
        height: 45px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-right: none;
        border: 1px solid rgba(77, 77, 76, 0.264);
        text-indent: 35px;
        font-size: 18px;
        font-weight: 600;
      }

      button {
        border: none;
        background-color: rgb(0, 184, 191);
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        width: 130px;
        color: #ffffff;
        font-size: 20px;
      }
    }
    .el-carousel__item {
      transform: translateX(20px) scale(1) !important;
      width: 1140px;
      display: flex;
      .Imgbox {
        margin-right: 20px;
        perspective: 130px;
        overflow: hidden;

        #imgs {
          border-radius: 8px;
          overflow: hidden;
          transition: all 0.1s;
        }
        #imgs:hover {
          transform: translate3d(0px, -2px, 7px);
          overflow: hidden;
          border-radius: 8px;
        }

        p {
          overflow: hidden;
          max-width: 250px;
          margin-top: 18px;
        }
      }
      .Imgbox:nth-child(4) {
        margin-right: 0;
      }
    }
    .el-carousel__container {
      height: 170px;
    }
    #imgs {
      width: 270px;
      height: 145px;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #ffffff;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #ffffff;
    }
  }

  .el-carousel__arrow {
    position: absolute;
    top: 45%;
  }
  .bangdan {
    width: 80%;
    height: 500px;
    background-color: #ffffff;
    margin: 0 auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

    .bangdanoo {
      width: 100%;
      height: 80px;
      font-size: 20px;
      line-height: 80px;
      font-weight: 600;
      text-indent: 28px;
    }

    .ooeeccdd {
      height: 390px;
      display: flex;
      flex-direction: row;

      .eeccdd {
        width: 22%;
        margin-left: 2.3%;
        border: 1px solid rgb(233, 231, 231);
        border-radius: 5px;
        overflow: hidden;
        &:hover {
          overflow: auto;
        }
      }
    }

    .xinchou {
      text-indent: 15px;
      position: sticky;
      top: 0;
      background-color: #ffffff;
      height: 45px;
      line-height: 45px;
      color: #727171;
      a {
        color: rgb(237, 244, 243);
        background-color: rgb(99, 11, 181);
        border-radius: 10px;
      }
    }
    .ppxxss:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
    .ppxxss {
      height: 70px;
      padding-left: 38px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .aassddff {
        font-size: 12px;
        color: rgb(144, 141, 141);
        overflow: hidden;
      }
    }
  }

  .mitan {
    width: 80%;
    height: 290px;
    border-radius: 5px;
    background-color: #ffffff;
    margin: 20px auto;
    position: relative;

    .bangdanooo {
      width: 100%;
      height: 70px;
      font-size: 20px;
      line-height: 70px;
      font-weight: 700;
      text-indent: 28px;
    }

    .el-carousel__container {
      height: 200px;
      .el-carousel__item {
        color: #475669;
        font-size: 14px;
        margin: 0;
        .tpiandd {
          width: 100%;
          margin-left: 20px;
          .tp {
            flex-shrink: 0;
            height: 100%;
            margin-left: 20px;
          }
          p {
            margin-top: 10px;
          }
        }
      }
    }
  }

  .gushi {
    width: 80%;
    height: 285px;
    border-radius: 5px;
    background-color: #ffffff;
    margin: 20px auto;

    .gushioo {
      background-color: aqua;
      width: 100%;
      height: 80px;
      font-size: 20px;
      line-height: 80px;
      font-weight: 600;
      text-indent: 28px;
    }
  }

  .eeccdd::-webkit-scrollbar {
    width: 3px;
    height: 5px;
  }
  .eeccdd::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e5e5e5;
  }
  .eeccdd::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ffffff;
  }

  ::-webkit-input-placeholder {
    color: rgb(156, 159, 159);
  }
  input:focus {
    outline: 2px solid rgb(195, 241, 243);
  }

  .footer .foot {
    background-color: #18142e;
  }
}
</style>